<template>
	<view class="login-container">
		<!-- 背景装饰 -->
		<view class="bg-decoration top-left"></view>
		<view class="bg-decoration bottom-right"></view>

		<view class="login-box">
			<!-- 右侧登录表单 -->
			<view class="form-section">
				<view class="login-form">
					<view class="form-field">
						<view class="field-label">用户名</view>
						<view class="input-control">
							<input type="text" v-model="addForm.userName" placeholder="请输入用户名" class="form-input" />
						</view>
					</view>

					<view class="form-field">
						<view class="field-label">昵称</view>
						<view class="input-control">
							<input type="text" v-model="addForm.nickname" placeholder="请输入昵称" class="form-input" />
						</view>
					</view>

					<view class="form-field">
						<view class="field-label">账号</view>
						<view class="input-control">
							<input type="text" v-model="addForm.accountNumber" placeholder="请输入账号" class="form-input" />
						</view>
					</view>

					<view class="form-field">
						<view class="field-label">密码</view>
						<view class="input-control">
							<input type="password" v-model="addForm.password" placeholder="请输入密码" class="form-input" />
						</view>
					</view>
					<button class="submit-btn" @click="registerSave">注册</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addForm: {
					userName: "",
					nickname: "",
					accountNumber: "",
					password: ""
				},
				defintedRole: {}
			};
		},

		onShow() {
			this.getDefintedRole()
		},

		methods: {
			async registerSave() {
				if(!this.verifyForm()){
					this.$showToast("请检查表单信息是否填写完整~")
					return
				}
				
				// 查询当前账号是否存在
				let isExist = await this.$axios("overallSituation", {
					databaseName: "userList",
					state: 'look',
					accountNumber: this.addForm.accountNumber
				})

				if (isExist.code == 200 && Array.isArray(isExist.data) && isExist.data.length == 0) {

					if (this.defintedRole._id) {
						let result = await this.$axios(
							"overallSituation", {
								state: "add",
								databaseName: "userList",
								...this.addForm,
								createTime:this.$getTime(),
								roleId: this.defintedRole._id
							},
							true
						);

						if (result.code == 200) {
							this.$showToast("注册成功，登陆后解锁更多功能")
							setTimeout(() => {
								uni.navigateBack()
							} , 1500)
						}
					} else {
						this.$showToast("注册失败，请联系管理员")
					}
				}else {
					this.$showToast("当前账号已存在，换一个试试吧~")
				}
			},

			async getDefintedRole() {
				// 获取默认角色
				const result = await this.$axios('overallSituation', {
					state: "look",
					databaseName: "role",
					sort: "asc",
					isDefault: '1'
				});

				if (result.code == 200 && Array.isArray(result.data) && result.data.length != 0) {
					this.defintedRole = result.data[0] || {}
				}
			},

			verifyForm() {
				for (let key in this.addForm) {
					if (!this.addForm[key]) {
						return false
					}
				}
				return true
			}
		},
	};
</script>

<style scoped>
	.login-container {
		min-height: 100vh;
		background-color: #f9fafb;
		position: relative;
		overflow: hidden;
	}

	/* 背景装饰 */
	.bg-decoration {
		position: absolute;
		width: 500rpx;
		height: 500rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(96, 165, 250, 0.1) 100%);
		z-index: 0;
	}

	.top-left {
		top: -250rpx;
		left: -250rpx;
	}

	.bottom-right {
		bottom: -250rpx;
		right: -250rpx;
	}

	/* 登录盒子 */
	.login-box {
		position: relative;
		z-index: 1;
		width: 90%;
		max-width: 1000rpx;
		margin: 0 auto;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* 品牌区域 */
	.brand-section {
		text-align: center;
		padding: 60rpx 30rpx;
		margin-bottom: 40rpx;
	}

	.brand-logo {
		font-size: 48rpx;
		font-weight: 700;
		color: #3B82F6;
		margin-bottom: 20rpx;
	}

	.brand-slogan {
		font-size: 28rpx;
		color: #1E293B;
		margin-bottom: 15rpx;
		font-weight: 500;
	}

	.brand-desc {
		font-size: 22rpx;
		color: #64748B;
		max-width: 500rpx;
		margin: 0 auto;
		line-height: 1.6;
	}

	/* 表单区域 */
	.form-section {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
		padding: 50rpx 40rpx;
	}

	.form-header {
		margin-bottom: 40rpx;
	}

	.form-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #1E293B;
		margin-bottom: 10rpx;
	}

	.form-subtitle {
		font-size: 22rpx;
		color: #64748B;
	}

	/* 表单样式 */
	.login-form {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.form-field {
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.field-label {
		font-size: 24rpx;
		color: #334155;
		font-weight: 500;
	}

	.input-control {
		position: relative;
	}

	.form-input {
		width: 100%;
		height: 88rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		border: 1rpx solid #E2E8F0;
		border-radius: 8rpx;
		font-size: 24rpx;
		color: #1E293B;
		background-color: #F8FAFC;
	}

	.form-input::placeholder {
		color: #94A3B8;
		font-size: 22rpx;
	}

	.form-input:focus {
		outline: none;
		border-color: #3B82F6;
		box-shadow: 0 0 0 3rpx rgba(59, 130, 246, 0.1);
	}

	/* 表单操作 */
	.form-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
	}

	.forgot-link {
		font-size: 22rpx;
		color: #3B82F6;
	}

	/* 按钮样式 */
	.submit-btn {
		width: 100%;
		height: 90rpx;
		background-color: #3B82F6;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 26rpx;
		font-weight: 500;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn:active {
		background-color: #2563EB;
	}

	/* 注册提示 */
	.register-prompt {
		text-align: center;
		margin-top: 30rpx;
		font-size: 22rpx;
		color: #64748B;
	}

	.register-link {
		color: #3B82F6;
		font-weight: 500;
	}
</style>